<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>加载二维地图</title>
    <!-- 引入CSS文件 -->
    <link href='../static/css/bundle.css' rel='stylesheet'/>
    <!-- 引入js文件 -->
    <script src="../static/js/bundle.js"></script>
    <script src="../static/js/config.js"></script>
</head>
<body>
<div id="map" style='width: 1440px; height: 680px;'></div>
<div>
    <button onclick="addLevel()">增加一层</button>
    <button onclick="reduceLevel()">减少一层</button>
    <div>设置楼层:<input type="text" id="input_level">
        <button onclick="setLevel()">确定</button>
    </div>
    <button onclick="showMapLevelInfo()">获取楼层信息</button>
</div>
<div>鼠标放到地图上，按下键盘上的Ctrl键，通过鼠标左键可以体验地图360度旋转和上下2D、2.5D效果</div>

<script type="application/javascript">
    
    //配置地图调用授权Token
    creeper.CreeperConfig.token = "5rWL6K+VZGVtb0pTOjg2YTMyMGExZTM3YTUyYjg2MWYxZDA0N2NlNjU0ZDU49";
    //配置地图ID、地图接口地址
    var vectorMap = new creeper.VectorMap('map',config.wmapId,config.mapBaseUrl);

    vectorMap.on('floor.state.change', function (event) {
        console.info('楼层显示状态被改变:' + event);
    });
    vectorMap.on('floor.lev', function (event) {
        console.log(event)
    });

    function addLevel() {
        vectorMap.addLevel();
    }

    function reduceLevel() {
        vectorMap.reduceLevel();
    }

    function setLevel() {
        var level = Number(document.getElementById('input_level').value) - 1;

        vectorMap.setLevel(level)
    }

    function showMapLevelInfo() {
        var maxLevel = vectorMap.getMaxLevel();
        var minLevel = vectorMap.getMinLevel();

        alert('最大楼层:' + maxLevel + '\n最小楼层:' + minLevel + "\n总楼层:" + (maxLevel - minLevel))
    }
</script>
</body>
</html>
